<link rel="stylesheet" href="/cn/css/exerciseNew/speakResult.css?v=1.2">
<script type="text/javascript" src="/cn/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/cn/js/jq-ui.min.js"></script>
<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>
<style>
    .exerciseCenter {
        overflow: auto;
    }

    .exampleArticle {
        height: auto;
    }
</style>
<section id="exerciseDetail" v-cloak>
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="w12 headContent">
                <div class="headTitle">{{questionData!=''?questionData.parent.name:''}}</div>

                <div class="operateBtn">
                    <a href="/cn/exercise/<?php echo $tmp_name; ?>?category=all" class="upData">退出</a>
                    <a :href="'/cn/exercise/speak-detail?content_id='+ content_id" class="parcticeAgain"
                       style="margin-right: 25px;background:#795FC2;color: white">重新练习</a>
                    <img src="/cn/images/exerciseNew/16@2x.png" alt="" class="fullScreen" @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>

    <input name="content_id" value="<?php echo $pid ?>" type="hidden" id="content_id">

    <!-- 答案部分 -->
    <div class="exerciseCenter">
        <div class="speakTitle" v-html="questionData!=''?questionData.son[0].description:''"></div>

        <div class="userAnswerCover">
            <!-- 用户答案 -->
            <div class="operateBtnCover">
                <!-- 音频地址 隐藏 -->
                <audio id="bgAudio"
                       :src="questionData!=''?'https://www.thinkuprep.com/'+questionData.son[0].my_answer:''"
                       controls></audio>
                <!--                <audio id="bgAudio" :src="'https://www.thinkuprep.com/'+questionData.son[0].my_answer"-->
                <!--                       controls></audio>-->
                <p>我的回答：</p>
                <div class="audioCover">
                    <a href="javascript:void(0)" class="playBtn" v-if="!isPlay" @click="playAudio">
                        <img src="/cn/images/exerciseNew/24gf-play.png" alt="">
                    </a>
                    <a href="javascript:void(0)" class="pauseBtn" v-if="isPlay" @click="playAudio">
                        <img src="/cn/images/exerciseNew/24gf-pause2.png" alt="">
                    </a>
                    <!--                    进度条-->
                    <div class="progressCover">
                        <p class="original"></p>
                        <p class="currentProgress" :style="{'width': left}"></p>
                        <img id="dragVolum" class="progressBtn" :style="{'left': left}"
                             src="/cn/images/exerciseNew/ty2@2x.png" alt="">
                    </div>
                    <p class="time">{{totalTime}}</p>
                </div>
            </div>
            <!-- 示例答案 -->
            <div class="example">
                <p class="exampleTitle">参考答案</p>
                <div class="exampleArticle" v-html="questionData!=''?questionData.son[0].alternatives:''"></div>
            </div>
        </div>
        <div class="report_btn" >
            <button onclick="showReport(this)"><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/report.png">录音转文本并获取智能分析报告
            </button>
        </div>
        <div class="report_section" style="display: none">
            <div class="score_card">
                <div class="report_btn">
                    <button><img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/report.png">获取智能分析报告</button>
                </div>
                <p class="section_title">录音转文本</p>
                <div class="my_answer_text">
                    {{questionData!=''?answerRemark.sentence:''}}
                </div>
                <div class="score_content">
                    <div class="score_box">
                        <p><span>整体得分</span>：<b>{{questionData!=''?answerRemark.total_score:''}}</b>分</p>
                        <p><span>语&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;速</span>：<span>{{questionData!=''?answerRemark.speeking_speed:''}}词/分钟</span>
                        </p>
                    </div>
                    <ul class="score_list">
                        <li class="score_item">
                            <p class="score_name">发音维度 {{questionData!=''?answerRemark.phone_score:''}}分</p>
                            <div class="score_pro">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/map.png" v-if="questionData"
                                     :style="'left:'+ phone_score_pro">

                                <div><p><span></span><br>较差</p>
                                    <p><span></span><br>一般</p>
                                    <p><span></span><br>良好</p></div>
                            </div>
                        </li>
                        <li class="score_item">
                            <p class="score_name">语法维度 {{questionData!=''?answerRemark.accuracy_score:''}}分</p>
                            <div class="score_pro">
                                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/map.png" v-if="questionData">

                                <div><p><span></span><br>较差</p>
                                    <p><span></span><br>一般</p>
                                    <p><span></span><br>良好</p></div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="report_card" style="display: none">
                <p class="report_card_name">分段分析</p>
                <div class="report_card_main">

                    <p class="section_title">发音部分</p>
                    <ul class="word_list">
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                        <li>
                            <p>单词[the]朗读: 增读 得分:0.0</p>
                            <p> L音节[ði]</p>
                            <p> L音素[ð] 朗读: 增读</p>
                            <p> L音素[i]朗读: 增读</p>
                        </li>
                    </ul>
                    <p class="section_title">语法部分</p>
                    <ul class="grammar_list">
                        <li class="grammar_item">
                            <span>【搭配错误】</span>lion's roar, 而
                        </li>
                        <li class="grammar_item">
                            <span>【搭配错误】</span>lion's roar, 而
                        </li>
                        <li class="grammar_item">
                            <span>【搭配错误】</span>lion's roar, 而
                        </li>
                    </ul>
                </div>

            </div>
            <div class="report_card">
                <p class="report_card_name">学习建议</p>
                <div class="report_card_main">
                    <ul class="suggest_list">
                        <li class="suggest_item"><p class="suggest_title">01. Pronunciation</p>
                            <div class="suggest_des">{{questionData!=''?suggest.phone:''}}</div>
                        </li>
                        <li class="suggest_item"><p class="suggest_title">02. Grammatical rang</p>
                            <div class="suggest_des">{{questionData!=''?suggest.accuracy:''}}</div>
                        </li>
                        <li class="suggest_item"><p class="suggest_title">03. Lexical resource</p>
                            <div class="suggest_des">{{questionData!=''?suggest.speeking_speed:''}}</div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="wechat_box">
                <p class="wechat_text">亲爱的同学: <br>快扫描右方二维码找老师获取</p>
                <p class="wechat_img"><img
                            src="https://file.viplgw.cn/ui/thinku-ielts-new/images/index_slices/xuezhang.png"></p>
            </div>
        </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footNav">
        <div class="footNavCover">
            <div class="reviewBtn" style="visibility: hidden"></div>
            <div class="quesNumCover">
                <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                <a href="javascript:void(0)"
                   :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': item.content_id == content_id }"
                   v-for="(item,index) in questionData.question_list" @click="goNew(item.content_id)">{{index+1}}</a>
            </div>
            <div class="turnBtn">
                <a href="javascript:void(0)" class="prevBtn" @click="prev">
                    <img src="/cn/images/exerciseNew/18@2x.png" alt="">
                    <span>上一题</span>
                </a>
                <a href="javascript:void(0)" class="nextBtn" @click="next">
                    <img src="/cn/images/exerciseNew/19@2x.png" alt="">
                    <span>下一题</span>
                </a>
            </div>
        </div>
    </div>


</section>


<script src="/cn/js/exerciseReview/speakResult.js?v=1.1.1"></script>

<script>
    function showReport(_this) {
        $(_this).hide();
        $('.report_section').slideDown();
    }
</script>
